<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
    <link rel="stylesheet" href="./static/css/typo.css">
    <link rel="stylesheet" href="./static/css/animate.css">
    <link rel="stylesheet" href="./static/lib/prism/prism.css">
    <link rel="stylesheet" href="./static/lib/tocbot/tocbot.css">
    <link rel="stylesheet" href="./static/css/me.css">
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
</head>

<body>

<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini">
    <div th:insert="~{_fragments :: navFragment(1)}"></div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>


<!--中间内容-->
<div id="waypoint" class="m-container-small m-padded-tb-big animated fadeIn">
    <div class="ui container">

        <div class="ui top attached segment">
            <div class="ui horizontal link list">
                <div class="item">
                    <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                    <div class="content"><a href="#" class="header">王大双</a></div>
                </div>
                <div class="item">
                    <i class="calendar icon"></i><span th:text="${blog.updateTime}"></span>
                </div>
                <div class="item">
                    <i class="eye icon"></i><span th:text="${blog.views}"></span>
                </div>
            </div>
        </div>


        <!--<div class="ui attached segment">
            &lt;!&ndash;图片区域&ndash;&gt;
            <img src="https://unsplash.it/800/450?image=1006" th:src="${blog.firstPicture}" alt=""
                 class="ui fluid rounded image">
        </div>-->

        <div class="ui attached padded segment">
            <!--内容区域-->
            <div class="ui right aligned basic segment">
                <div class="ui orange basic label">原创</div>
            </div>

            <h2 class="ui center aligned header" th:text="${blog.title}"></h2>
            <br>
            <div id="content" class="typo typo-selection js-toc-content m-padded-lr-responsiv m-padded-tb-large">

                <embed th:src="@{/pdf/TB2020+姚立胜+计算机专业+JAVA开发.pdf}" width="1100" height="1500">

            </div>

            <!--标签-->
            <div class="m-padded-lr-responsiv">
                <div class="ui basic teal left pointing label">
                    方法论
                </div>
            </div>

            <!--赞赏-->
            <div class="ui center aligned basic segment">
                <button id="payButton" class="ui orange basic circular button">赞赏</button>
            </div>

            <div class="ui payQR flowing popup transition hidden">
                <div class="ui orange basic label">
                    <div class="ui images" style="font-size: inherit !important;">

                        <div class="image">
                            <img src="./static/images/wechat.jpg" alt="" class="ui rounded bordered image"
                                 style="width: 120px;">
                            <div>支付宝支付</div>
                        </div>
                        <div class="image">
                            <img src="./static/images/wechat.jpg" alt="" class="ui rounded bordered image"
                                 style="width: 120px;">
                            <div>微信支付</div>
                        </div>

                    </div>
                </div>
            </div>
        </div>


        <div class="ui attached positive message">
            <!--博客信息-->
            <div class="ui middle aligned grid">
                <div class="eleven wide column">
                    <ui class="list">
                        <li>作者：王大双（联系作者）</li>
                        <li>发表时间：2021-05-16 00:30</li>
                        <li>版本声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                        <li>公众号转载：请文末添加作者公众号二维码</li>
                    </ui>
                </div>

                <div class="five wide column">
                    <img src="./static/images/wechat.jpg" alt="" class="ui right floated rounded bordered image"
                         style="width: 110px;">
                </div>
            </div>
        </div>


        <div class="ui bottom attached segment">
            <!--留言区域列表-->
            <div id="comment-container" class="ui teal segment">
                <div class="ui comments">
                    <h3 class="ui dividing header">Comments</h3>
                    <div class="comment">
                        <a class="avatar">
                            <img src="https://unsplash.it/800/450?image=1006">
                        </a>
                        <div class="content">
                            <a class="author">Matt</a>
                            <div class="metadata">
                                <span class="date">Today at 5:42PM</span>
                            </div>
                            <div class="text">
                                How artistic!
                            </div>
                            <div class="actions">
                                <a class="reply">回复</a>
                            </div>
                        </div>
                    </div>

                    <div class="comment">
                        <a class="avatar">
                            <img src="https://unsplash.it/800/450?image=1006">
                        </a>
                        <div class="content">
                            <a class="author">Elliot Fu</a>
                            <div class="metadata">
                                <span class="date">Yesterday at 12:30AM</span>
                            </div>
                            <div class="text">
                                <p>This has been very useful for my research. Thanks as well!</p>
                            </div>
                            <div class="actions">
                                <a class="reply">Reply</a>
                            </div>
                        </div>

                        <div class="comments">
                            <div class="comment">
                                <a class="avatar">
                                    <img src="https://unsplash.it/800/450?image=1006">
                                </a>
                                <div class="content">
                                    <a class="author">Jenny Hess</a>
                                    <div class="metadata">
                                        <span class="date">Just now</span>
                                    </div>
                                    <div class="text">
                                        Elliot you are always so right :)
                                    </div>
                                    <div class="actions">
                                        <a class="reply">回复</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="comment">
                        <a class="avatar">
                            <img src="https://unsplash.it/800/450?image=1006">
                        </a>
                        <div class="content">
                            <a class="author">Joe Henderson</a>
                            <div class="metadata">
                                <span class="date">5 days ago</span>
                            </div>
                            <div class="text">
                                Dude, this is awesome. Thanks so much
                            </div>
                            <div class="actions">
                                <a class="reply">回复</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="ui form">
                <div class="field">
                    <textarea name="content" placeholder="请输入评论信息…"></textarea>
                </div>

                <div class="fields">
                    <div class="field m-mobile-wide m-margin--bottm-small">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="nickname" placeholder="姓名">
                        </div>

                    </div>

                    <div class="field m-mobile-wide m-margin--bottm-small">
                        <div class="ui left icon input">
                            <i class="mail icon"></i>
                            <input type="text" name="email" placeholder="邮箱">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin--bottm-small">
                        <button class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
<br>
<br>

<div id="toolbar" class="m-padded m-fixed m-right-buttom" style="display: none;">
    <div class="ui vertical icon buttons">
        <button type="button" class="ui toc teal button">目录</button>
        <a href="#comment-container" class="ui teal button">留言</a>
        <button class="ui wechat icon button"><i class="weixin icon"></i></button>
        <div id="toTop-button" class="ui icon button"><i class="chevron up icon"></i></div>
    </div>
</div>

<div class="ui toc-container flowing popup transition hidden" style="width: 250px !important;">
    <ol class="js-toc">

    </ol>
</div>

<div id="qrcode" class="ui wechat-qr flowing popup transition hidden" style="width: 130px !important;">
    <!-- <img src="./static/images/wechat.jpg" alt="" class="ui rounded image" style="width: 120px;"> -->
</div>

<!--底部footer-->
<footer class="ui inverted vertical segment m-padded-tb-massive" th:insert="~{_fragments :: footerFragment}">
</footer>


<link rel="stylesheet" href="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
<script type="application/javascript">


    $(document).ready(function () {
        var text= "${blog.content}";
        alert(text)

        function sss() {
            $("#mdCon").html(text);
        }
    });

</script>
</body>

</html>

</html>